<%-- Created by IntelliJ IDEA. User: Administrator Date: 2022/12/13 Time: 9:06
To change this template use File | Settings | File Templates. --%> <%@ page
contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <title>菜单管理</title>
    <!-- 引入 样式 和 js -->
    <jsp:include page="../../common/css_js.jsp" />
    <jsp:include page="../../common/table.jsp" />
    <!-- 树形表格的 样式 和 js -->
    <link
      href="${ctx}/static/js/jquery-treegrid/jquery.treegrid.min.css"
      rel="stylesheet"
    />
    <script
      type="text/javascript"
      src="${ctx}/static/js/jquery-treegrid/jquery.treegrid.min.js"
    ></script>
    <script
      type="text/javascript"
      src="${ctx}/static/js/bootstrap-table/extensions/treegrid/bootstrap-table-treegrid.min.js"
    ></script>
    <style>
      .tree-table tr {
        width: 30px;
      }
    </style>
  </head>
  <body>
    <div class="col-lg-12">
      <div class="card">
        <header class="card-header">
          <div class="card-title">
            <b style="font-size: 25px">菜单列表--所有菜单信息</b>
          </div>
        </header>
        <div class="card-body">
          <form class="form-inline" method="post" action="#" id="toolbar">
            <!-- 操作 -->
            <a
              class="btn btn-primary"
              href="#"
              onclick="add(0, true)"
              title="增加一个目录"
              ><i class="mdi mdi-plus"></i>新增目录</a
            >
            &nbsp;
            <a
              class="btn btn-primary"
              href="#"
              onclick="unfold()"
              title="展开所有"
              ><i class="mdi mdi-arrow-collapse-down"></i>全部展开</a
            >
            &nbsp;
            <a
              class="btn btn-primary"
              href="#"
              onclick="fold()"
              title="折叠所有"
              ><i class="mdi mdi-arrow-collapse-up"></i>全部折叠</a
            >
          </form>
          <div class="table-responsive">
            <table class="tree-table table-striped text-nowrap"></table>
          </div>
        </div>
      </div>
    </div>

    <!-- Modal -->
    <div
      class="modal fade bd-example-modal-lg"
      id="myModal"
      tabindex="-1"
      role="dialog"
      aria-labelledby="myModalLabel"
    >
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title" id="myModalLabel">新增模块信息</h4>
            <div class="col-md-2 column"></div>
            <div class="col-md-4 column" id="close"></div>
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <a aria-hidden="true">&times;</a>
            </button>
          </div>
          <div class="modal-body" style="background-color: #f8faf7">
            <!-- 增加修改表单 -->
            <form style="height: 440px">
              <table class="table table-bordered table-hover" id="tab333">
                <input type="hidden" name="id" />
                <input type="hidden" name="parentId" />
                <input type="hidden" name="updateDate" />
                <tr>
                  <td>模块名称：</td>
                  <td>
                    <label
                      ><input
                        name="moduleName"
                        class="form-control"
                        placeholder="请输入模块名称"
                    /></label>
                  </td>
                </tr>
                <tr>
                  <td>模块类型：</td>
                  <td>
                    <label>
                      <select class="form-control" name="moduleType"></select>
                    </label>
                  </td>
                </tr>
                <tr>
                  <td>模块路径：</td>
                  <td>
                    <label
                      ><input
                        name="moduleUrl"
                        class="form-control"
                        placeholder="请输入模块路径"
                    /></label>
                  </td>
                </tr>
                <tr>
                  <td>权限值：</td>
                  <td>
                    <label
                      ><input
                        name="perCode"
                        class="form-control"
                        placeholder="请输入权限值"
                    /></label>
                  </td>
                </tr>
                <tr>
                  <td>图标：</td>
                  <td>
                    <div class="input-group mb-3">
                      <div class="input-group-prepend">
                        <span class="input-group-text" id="basic-addon1"
                          >mdi
                        </span>
                      </div>
                      <input
                        name="moduleIcon"
                        class="form-control"
                        placeholder="请输入模块图标"
                      />
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>显示顺序：</td>
                  <td>
                    <label
                      ><input
                        name="sort"
                        class="form-control"
                        placeholder="请输入显示顺序"
                    /></label>
                  </td>
                </tr>
                <tr>
                  <td>状态：</td>
                  <td>
                    <div
                      class="custom-control custom-radio custom-control-inline"
                    >
                      <input
                        type="radio"
                        id="customRadioInline1"
                        name="isValid"
                        value="1"
                        checked="checked"
                        class="custom-control-input"
                      />
                      <label
                        class="custom-control-label"
                        for="customRadioInline1"
                        >有效</label
                      >
                    </div>
                    <div
                      class="custom-control custom-radio custom-control-inline"
                    >
                      <input
                        type="radio"
                        id="customRadioInline2"
                        name="isValid"
                        value="0"
                        class="custom-control-input"
                      />
                      <label
                        class="custom-control-label"
                        for="customRadioInline2"
                        >无效</label
                      >
                    </div>
                  </td>
                </tr>
              </table>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">
              关闭
            </button>
            <button
              type="button"
              id="btn111"
              class="btn btn-primary"
              onclick="insert_update()"
            >
              增加
            </button>
          </div>
        </div>
      </div>
    </div>
    <script type="text/javascript">
      let $treeTable = $(".tree-table");
      $(function () {
        $treeTable.bootstrapTable({
          url: "${ctx}/module/list",
          idField: "id",
          dataType: "json",
          undefinedText: "-", // 当字段为 undefined 显示
          toolbar: "#toolbar", // 工具按钮容器
          showColumns: true, // 是否显示所有的列
          showRefresh: true, // 是否显示刷新按钮
          showToggle: true, // 是否显示详细视图和列表视图的切换按钮(clickToSelect同时设置为true时点击会报错)
          showExport: true, // 是否显示导出按钮, 导出功能需要导出插件支持(tableexport.min.js)
          exportDataType: "all", // 导出数据类型, 'basic':当前页, 'all':所有数据, 'selected':选中的数据
          // 响应处理
          responseHandler: function (res) {
            if (res.code !== 200) {
              notify("mdi mdi-close", res.message, "danger");
              return [];
            }
            return res.data;
          },
          // 查询参数
          queryParams: function () {
            return $("form:eq(0)").serializeArray();
          },

          columns: [
            {
              field: "id",
              title: "编号",
              visible: false,
            },
            {
              field: "moduleName",
              title: "模块名称",
            },
            {
              field: "moduleType",
              title: "模块类型",
              formatter: function (value, row, index) {
                // 格式化模块类型
                if (row.moduleType === "1") {
                  return '<span class="badge badge-primary">目录</span>';
                } else if (row.moduleType === "2") {
                  return '<span class="badge badge-warning">菜单</span>';
                } else if (row.moduleType === "3") {
                  return '<span class="badge badge-light">按钮</span>';
                } else {
                  return "-";
                }
              },
            },
            {
              field: "moduleUrl",
              title: "模块路径",
              formatter: function (value, row, index) {
                // 格式化路径
                return "<a href='#'>" + value + "</a>";
              },
            },
            {
              field: "moduleIcon",
              title: "菜单图标",
              formatter: function (value, row, index) {
                // 格式化图标
                return "<i class='mdi " + value + "'></i>";
              },
            },
            {
              field: "perCode",
              title: "权限值",
            },
            {
              field: "sort",
              title: "排序",
            },
            {
              field: "isValid",
              title: "是否有效",
              formatter: function (value, row, index) {
                // 格式化是否有效
                if (row.isValid === 1) {
                  return '<span class="badge badge-success">有效</span>';
                } else if (row.isValid === 0) {
                  return '<span class="badge badge-danger">无效</span>';
                } else {
                  return "-";
                }
              },
            },
            {
              field: "createDate",
              title: "创建时间",
            },
            {
              field: "operate",
              title: "操作",
              align: "center",
              events: {
                "click .role-add": function (e, value, row, index) {
                  add(row.id, false);
                },
                "click .role-delete": function (e, value, row, index) {
                  del(row);
                },
                "click .role-edit": function (e, value, row, index) {
                  edit(row);
                },
              },
              formatter: operateFormatter,
            },
          ],
          treeShowField: "moduleName",
          parentIdField: "parentId",
          onLoadError: function () {
            // 数据加载失败时调用的方法
            setTimeout(function () {
              notify("mdi mdi-close", "数据加载失败!", "danger");
            }, 300);
          },
          onResetView: function (data) {
            $treeTable.treegrid({
              initialState: "collapsed", // 所有节点都折叠
              treeColumn: 0,

              expanderExpandedClass: "mdi mdi-folder-open", // 打开的图标样式
              expanderCollapsedClass: "mdi mdi-folder",
            });

            // 只展开树形的第一集节点
            // $treeTable.treegrid('getRootNodes').treegrid('expand');
          },
          onCheck: function (row) {
            let datas = $treeTable.bootstrapTable("getData");
            selectChilds(datas, row, "id", "parentId", true); // 选择子类
            selectParentChecked(datas, row, "id", "parentId"); // 选择父类
            $treeTable.bootstrapTable("load", datas);
          },
          onUncheck: function (row) {
            let datas = $treeTable.bootstrapTable("getData");
            selectChilds(datas, row, "id", "parentId", false);
            $treeTable.bootstrapTable("load", datas);
          },
        });
      });

      /**
       * 选中父项时，同时选中子项
       * @param datas 所有的数据
       * @param row 当前数据
       * @param id id 字段名
       * @param pid 父id字段名
       */
      function selectChilds(datas, row, id, pid, checked) {
        for (let i in datas) {
          if (datas[i][pid] === row[id]) {
            datas[i].check = checked;
            selectChilds(datas, datas[i], id, pid, checked);
          }
        }
      }

      function selectParentChecked(datas, row, id, pid) {
        for (let i in datas) {
          if (datas[i][id] === row[pid]) {
            datas[i].check = true;
            selectParentChecked(datas, datas[i], id, pid);
          }
        }
      }

      // 操作按钮
      function operateFormatter(value, row, index) {
        return [
          '<a type="button" class="role-add btn btn-xs btn-primary m-r-5" title="增加一个子目录" data-toggle="tooltip"><i class="mdi mdi-plus"></i>添加子项</a>',
          '<a type="button" class="role-edit btn btn-xs btn-success m-r-5" title="修改当前行" data-toggle="tooltip"><i class="mdi mdi-pencil"></i>修改</a>',
          '<a type="button" class="role-delete btn btn-xs btn-danger" title="删除当前行" data-toggle="tooltip"><i class="mdi mdi-close"></i>删除</a>',
        ].join("");
      }

      // 操作方法 - 全部展开
      function unfold() {
        $treeTable.treegrid("getAllNodes").treegrid("expand");
      }

      // 操作方法 - 全部折叠
      function fold() {
        $treeTable.treegrid("getAllNodes").treegrid("collapse");
      }

      // 操作方法 - 增加
      function add(id, b) {
        // 模态框显示
        $("#myModal").modal("show");
        // 清空表单
        $("form")[1].reset();
        // 模态框标题
        $("#myModalLabel").html("新增模块信息");
        // 将操作按钮修改为保存
        $("#btn111").html("保存");
        // 将下拉列表的值移除
        $("[name='moduleType'] option").remove();
        // 父节点
        $("[name='parentId']").val(id);
        if (b) {
          $("[name='moduleType']").append(
            "<option value='1' selected>目录</option>"
          );
        } else {
          $("[name='moduleType']").append(
            "<option value=''>请选择模块类型</option><option value='2'>菜单</option>" +
              "<option value='3'>按钮</option>"
          );
        }
      }

      // 操作方法 - 编辑
      function edit(r) {
        // 模态框显示
        $("#myModal").modal("show");
        // 清空表单
        $("form")[1].reset();
        // 模态框标题
        $("#myModalLabel").html("修改模块信息");
        // 将下拉列表的值移除
        $("[name='moduleType'] option").remove();
        // 追加
        $("[name='moduleType']").append(
          "<option value='1'>目录</option><option value='2'>菜单</option><option value='3'>按钮</option>"
        );
        // 赋值
        $("[name='id']").val(r.id);
        $("[name='moduleName']").val(r.moduleName);
        $("[name='moduleType']").val(r.moduleType);
        $("[name='moduleUrl']").val(r.moduleUrl);
        $("[name='moduleIcon']").val(r.moduleIcon);
        r.isValid
          ? $("[name='isValid']:first").prop("checked", true)
          : $("[name='isValid']:last").prop("checked", true);
        $("[name='perCode']").val(r.perCode);
        $("[name='parentId']").val(r.parentId);
        $("[name='sort']").val(r.sort);
        // 将操作按钮修改为保存
        $("#btn111").html("修改");
      }

      // 增加修改用一个按钮
      function insert_update() {
        let b = false;
        let $moduleName = $("[name='moduleName']");
        let $moduleType = $("[name='moduleType']");
        let $moduleUrl = $("[name='moduleUrl']");
        let $perCode = $("[name='perCode']");
        let $sort = $("[name='sort']");

        if ($moduleName.val() === "") {
          notify("mdi mdi-close", "模块名称为必填项！", "danger");
          $moduleName.focus();
        } else if ($moduleType.val() === "") {
          notify("mdi mdi-close", "请选择模块类型！", "danger");
          $moduleType.focus();
        } else if ($moduleUrl.val() === "") {
          notify("mdi mdi-close", "模块路径为必填项！", "danger");
          $moduleUrl.focus();
        } else if ($perCode.val() === "") {
          notify("mdi mdi-close", "权限值为必填项项！", "danger");
          $perCode.focus();
        } else if ($sort.val() === "") {
          notify("mdi mdi-close", "显示顺序为必填项！", "danger");
          $sort.focus();
        } else if (isNaN($sort.val())) {
          notify("mdi mdi-close", "请输入一个数字！", "danger");
          $sort.focus();
        } else {
          b = true;
        }

        if (b) {
          let url =
            $("#btn111").html() === "保存"
              ? "${ctx}/module/save"
              : "${ctx}/module/update";
          let obj = $("form:eq(1)").serializeArray();
          $.post(url, obj, function (data) {
            $("#myModal").modal("hide");
            let loader = $("body").lyearloading({
              opacity: 0.2,
              spinnerSize: "lg",
            });
            setTimeout(function () {
              loader.destroy();
              if (data.code === 200) {
                // 刷新表格
                $treeTable.bootstrapTable("refresh");
                notify(
                  "mdi mdi-checkbox-marked-circle-outline",
                  data.message,
                  "success"
                );
              } else {
                notify("mdi mdi-close", data.message, "danger");
              }
            }, 1e3);
          });
        }
      }

      // 操作方法 - 删除
      function del(row) {
        $.confirm({
          title: "删除", // 标题
          content: "您确定要将" + row.moduleName + "删除吗？", // 内容
          type: "red", // 类型颜色
          icon: "mdi mdi-close", // 小图标
          typeAnimated: true, // 是否使用动画
          buttons: {
            // 按钮
            confirm: {
              // 确认按钮
              text: "确认",
              btnClass: "btn-red",
              action: function () {
                let loader = $("body").lyearloading({
                  opacity: 0.2,
                  spinnerSize: "lg",
                  spinnerText: "正在删除中...",
                  textColorClass: "text-danger",
                  spinnerColorClass: "text-danger",
                });
                setTimeout(function () {
                  $.get(
                    "${ctx}/module/delete",
                    "id=" + row.id,
                    function (data) {
                      loader.destroy();
                      if (data.code === 200) {
                        // 刷新表格
                        $treeTable.bootstrapTable("refresh");
                        notify(
                          "mdi mdi-checkbox-marked-circle-outline",
                          data.message,
                          "success"
                        );
                      } else {
                        notify("mdi mdi-close", data.message, "danger");
                      }
                    }
                  );
                }, 1e3);
              },
            },
            cancel: {
              // 取消按钮
              text: "取消",
              action: function () {},
            },
          },
        });
      }
    </script>
  </body>
</html>
